<template>
	<view class="category">
		<!-- 顶部 -->
		<view class="top">搜索商品</view>
		<!-- 底部 -->
		<view class="bottom">
			<!-- 左侧 -->
			<view class="left">
				<ul>
					<li v-for="(item,index) in arr" :class="{active:currentIndex == index}" @click="changeIndex(index)" :key="index">{{item.name}}</li>
				</ul>
			</view>
			<!-- 右侧 -->
			<view class="right">
				<scroll-view scroll-y="true" class="scroll">
					<image :src="showGood.imgUrl" mode=""></image>
					<view class="goods">
						<view class="item" v-for="(item,index) in showGood.subCateList" :key="index">
							<image :src="item.wapBannerUrl" mode=""></image>
							<text>{{item.name}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				currentIndex : 0
			};
		},
		onLoad(){
			this.$store.dispatch('getCategoryData')
		},
		computed:{
			...mapState({
				arr:state=>state.category.arr
			}),
			//计算出分类右侧需要展示的数据
			showGood(){
				return this.arr[this.currentIndex]
			}
		},
		methods:{
			changeIndex(index){
				this.currentIndex = index
			}
		}
	}
</script>

<style lang="stylus">
	.category
		width:100%
		height: 100%
		.top
			width: 90%
			height: 60rpx
			background: #eee
			margin: 10rpx auto
			line-height: 60rpx
			text-align: center
		.bottom
			width: 750rpx
			height: calc(100vh - 82rpx)
			border-top: 2rpx solid #eee
			display: flex
			.left
				width: 150rpx
				height: 100%
				border-right: 2rpx solid #eee
				ul
					width: 150rpx
					height: 100%
					list-style: none
					li
						width: 150rpx
						height: 80rpx
						text-align: center
						line-height: 80rpx;
					.active
						background: #BB2C08
						color: white
						border-bottom: 2rpx dashed #333
			.right
				flex: 1
				height: 100%
				.scroll
					width: 100%
					height: 100%
					image
						display: block
						width: 520rpx;
						height: 190rpx;
						margin: 10rpx auto
					.goods
						width: 100%
						display: flex
						flex-flow: wrap
						.item
							width: 33%
							height: 194rpx
							padding: 20rpx
							box-sizing: border-box
							image
								width: 100%
								height: 144rpx
							text
								font-size: 24rpx
								text-align: center
				
			
				
		
		
			
</style>
